<template>
  <Row class="main-container company-user-container">
    <!-- 控制按钮 -->
    <Col class="company-container-pane" :span="24" style="margin-bottom: 10px;padding-left: 15px;">
    <Button type="primary" icon="plus" @click="_addNew">新增区域</Button>
    </Col>

    <!-- 表格 -->
    <Col class="panel table-panel" :span="24">
    <Table :columns="columns" :data="tableData" border :loading="pageInfo.loading"></Table>
    </Col>

    <!-- 分页 -->
    <Col class="panel page-panel cf" :span="24" style="margin-bottom:15px;">
    <Page :total="pageInfo.total" class="fr" @on-change="switchThePaging"></Page>
    </Col>

    <!-- 新增表单 -->
    <Modal v-model="dialog.add" title="新增区域" width="30%;">
      <Form :model="addForm" :label-width="80" :rules="customValidate" ref="addFormRef">
        <FormItem label="区域名称:" prop="name">
          <Input v-model="addForm.name" placeholder="请输入区域名称..." clearable autofocus style="width: 200px"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="dialog.add = false;">取消</Button>
        <Button type="primary" @click="submitAddNew">确认</Button>
      </div>
    </Modal>

    <!-- 编辑表单 -->
    <Modal v-model="dialog.edit" title="编辑区域" width="30%;">
      <Form :model="editForm" :label-width="80" :rules="customValidate" ref="formEditRef">
        <FormItem label="区域名称:" prop="name">
          <Input v-model="editForm.name" placeholder="请输入区域名称..." clearable autofocus style="width: 200px"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="dialog.edit = false;">取消</Button>
        <Button type="primary" @click="submitAddEdit">确认</Button>
      </div>
    </Modal>
  </Row>
</template>
<script>
  import {
    validateAddress
  } from '@/utils/rules';
  import {
    getGroupList,
    editGroup,
    removeGroup,
    addGroup
  } from '@/api'
  export default {
    props: ['row'],
    mounted() {
      this.selectRow = this.row;
      this._getGroupList();
    },
    data() {
      return {
        addNewDisabled: false,
        pageInfo: {
          page: 1,
          total: 0,
          loading: false
        },
        dialog: {
          add: false,
          edit: false
        },
        addForm: {
          name: ""
        },
        editForm: {
          name: ""
        },
        selectRow: {},
        columns: [{
            title: '序号',
            type: 'index',
            width: 80,
            align: 'center'
          },
          {
            title: '区域名称',
            align: 'center',
            key: 'name'
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createdAt',
            render: (h, params) => {
              let time = this.moment(params.row.createdAt).format('YYYY-MM-DD');
              return h('span', time);
            }
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updatedAt',
            render: (h, params) => {
              let time = this.moment(params.row.updatedAt).format('YYYY-MM-DD');
              return h('span', time);
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 190,
            render: (h, params) => {
              let vm = this;
              let row = { ...params.row
              };
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      vm._handleEdit(row);
                    }
                  }
                }, '编辑'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true,
                    cancelText: "取消"
                  },
                  on: {
                    'on-ok': () => {
                      vm._handleDelete(row);
                    }
                  }
                }, [
                  h('Button', {
                    style: {
                      marginRight: '5px'
                    },
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                  }, '删除')
                ]),
              ])
            }
          }
        ],
        tableData: [],
        customValidate: {
          name: [{
            required: true,
            validator: validateAddress('区域名称', '区域名称只能输入中文、字母、数字、下划线和中划线'),
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      switchThePaging(index) {
        this.pageInfo.page = index;
        this._getGroupList();
      },

      // 新建区域
      _addNew() {
        this.dialog.add = true;
        this.$nextTick(_ => {
          this.$refs.addFormRef.resetFields();
          this.addForm.name = '';
        });
      },
      _handleEdit(row) {
        let vm = this;
        vm.dialog.edit = true;
        vm.$nextTick(_ => {
          vm.$refs.formEditRef.resetFields();
          vm.editForm = { ...row
          };
        })
      },


      // 删除用户组
      _handleDelete(row) {
        let id = row.id;
        let vm = this;
        removeGroup(id).then(res => {
          if (res.code == 200) {
            vm._getGroupList();
          } else {
            this.$Message.error(res.message);
          }
        })
      },


      // 获取企业组列表
      _getGroupList() {
        const _t = this;
        _t.pageInfo.loading = true;
        const params = {
          page: _t.pageInfo.page,
          companyId: _t.selectRow.id
        };
        getGroupList(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list;
            setTimeout(() => {
              _t.pageInfo.loading = false;
            }, 500)
          } else {
            setTimeout(() => {
              _t.pageInfo.loading = false;
            }, 500)
          }
        })
      },

      submitAddNew() {
        const _t = this;
        _t.$refs.addFormRef.validate((valid) => {
          if (valid) {
            this.addNewDisabled = true;

            const params = {
              ..._t.addForm,
              companyId: _t.selectRow.id
            };
            addGroup(params).then(res => {
              if (res.code == 200) {
                _t.$Message.success('新建成功');
                _t.dialog.add = false;
                this.addNewDisabled = false;
                _t._getGroupList();
              } else {
                // this.addNewDisabled = false;
                _t.$Message.error(res.message);
              }
            })
          }
        })
      },

      submitAddEdit() {
        let vm = this;
        vm.$refs.formEditRef.validate(valid => {
          if (valid) {
            let params = vm.editForm;
            let para = {
              id: params.id,
              name: params.name,
            };
            editGroup(para).then(res => {
              if (res.code == 200) {
                this.$Message.success('编辑成功');
                this._getGroupList();
                this.dialog.edit = false;
              } else {
                this.$Message.error(res.message);
              }
            })
          }
        })
      }
    },

    // watch: {
    //   'row': {
    //     handler(value) {
    //       const _t = this;
    //       _t.selectRow = value;
    //       _t.pageInfo.loading = true;
    //       _t._getGroupList();
    //     },
    //     deep: true
    //   }
    // }
  }

</script>
